<template>
    <view class="footer">
        <view class="footer-content space-between align-center pr-20">
            <view class="align-center">
                <view @click="goContact" class="pl-40 pr-30 column center">
                    <hj-image
                        src="service-01.png"
                        :isLoad="false"
                        height="48rpx"
                        width="48rpx"
                        mode="heightFix"
                    />
                    <text class="ft-24 t-6">客服</text>
                </view>
                <view class="c-m price">
                    <text class="ft-24" v-if="checkInInfo.nightsCount > 1">均</text>
                    <text class="ft-24">￥</text>
                    <text class="ft-46 bold" v-if="checkInInfo.nightsCount > 1">{{
                        getPrice(info.averagePrice)
                    }}</text>
                    <text class="ft-46 bold" v-else>{{ info.averagePrice }}</text>
                </view>
            </view>
            <hj-login @click="preOrder" @init="preOrder">
                <view
                    :class="{ disabled: stockNum <= 0 }"
                    class="footer-btn center ft-30 t-w br-44 ml-30 bold"
                    >{{ stockNum > 0 ? '立即预订' : '房源不足' }}</view
                >
            </hj-login>
        </view>
        <hj-safe-footer />
    </view>
</template>

<script setup>
/**
 * @description 详情底部
 * @author yinzhi
 * @date 2025-05
 */
import { computed, defineComponent } from 'vue'
defineComponent({
    name: 'DetailsFooter'
})
const props = defineProps({
    info: {
        type: Object,
        default: () => {}
    },
    roomId: {
        type: [String, Number],
        default: ''
    },
    stockNum: {
        type: Number,
        default: 0
    }
})

import { useStore } from 'vuex'
const store = useStore()
const hotelInfo = computed(() => store.state.platform.hotelInfo || '')
// 入住信息
const checkInInfo = computed(() => store.state.platform.checkInInfo || '')
// 跳转预下单页面
const preOrder = () => {
    if (!props.roomId || props.stockNum <= 0) return
    uni.navigateTo({
        url: `/pages/order/pre-order/index?roomId=${props.roomId}`
    })
}
// 联系客服
const goContact = () => {
    uni.showModal({
        title: '联系客服',
        content: '是否拨打客服电话？',
        success: res => {
            if (res.confirm) {
                uni.makePhoneCall({
                    phoneNumber: hotelInfo.value.phone || '',
                    fail: e => {
                        console.error('联系客服失败：', e)
                    }
                })
            }
        }
    })
}
// 向上取整数
const getPrice = value => {
    const num = Number(value)
    return Math.ceil(num) || '--'
}
</script>

<style scoped lang="scss">
.footer {
    display: block;
    position: relative;
    z-index: 50;
    background: $uni-bg-color;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
    &-content {
        height: 120rpx;
    }
    &-btn {
        width: 260rpx;
        height: 80rpx;
        background: $uni-color-primary;
    }
    &-btn.disabled {
        background: #e1e1e1;
        color: #999;
    }
}
</style>
